<template>
  <div class="access_nav">
      <ul class="access_nav_list">
          <li class="access_nav_item" :class="currentNav == index? 'isShowNav': ''" @click="btnNav(index, item.id)" v-for="(item,index) in accessList" :key="item.index">{{item.name}}</li> 
      </ul>
  </div>
</template>

<script>
export default {
    name:'AccessNav',
    props:{
        accessList:{
            type:Array,
            default: []
        },
        currentNav:{
            type: Number,
            default: 0
        }
    },
    data(){
        return{  
        }
    },
    methods:{
        btnNav(index,id){ 
            this.$emit('changeCurrentNav',index,id) 
        }
    },
    mounted(){   
    }
}
</script>

<style lang="less" scoped>
    .access_nav{ 
        height: 55px;
        line-height: 55px;
        font-size: 16px;
        text-align: center;
        .access_nav_list{
            display: flex;
            .access_nav_item{
                flex: 1;
            }
        }
    }
    // 是否高亮
    .isShowNav{ 
        border-bottom: 2px solid #0b3fff;
    }
</style>